<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/style.css" rel='stylesheet' type='text/css' />
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />	
		<style type="text/css">
			.bg_color{
				background-color: #36c7b7;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body style="background-attachment:fixed;">
		<!----features----->
		<div id="fea" class="features">
			<div class="container">
				<div class="section-head text-center">
					<!--<h3><span class="frist"> </span>APP介绍<span class="second"> </span></h3>-->
					<p>实地圈APP可以给用户提供的想要物品的详细信息 ，对于用户来说可以找到离你最近、价格最优惠的商品 ;  对于商家来说可以给他们的店铺和产品提供展示的平台 ，吸引到更多的人来自店铺进行购买</p>
				</div>
				<!----features-grids----->
				<div class="features-grids">
					<div class="col-md-4 features-grid nav nav-tabs" id="otherInfoTab">
						<div class="features-grid-info bg_color active"><a class="cl" href="#t1">
							<div class="col-md-2 features-icon">
								<span class="f-icon0"> </span>
							</div>
							<div class="col-md-10 features-info">
								<h4>Accusan timar</h4>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="clearfix"> </div></a>
						</div>
						<div class="features-grid-info"><a class="cl" href="#t2">
							<div class="col-md-2 features-icon">
								<span class="f-icon1"> </span>
							</div>
							<div class="col-md-10 features-info">
								<h4>Accusan timar</h4>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="clearfix"> </div></a>
						</div>
						<div class="features-grid-info"><a class="cl" href="#t3">
							<div class="col-md-2 features-icon">
								<span class="f-icon2"> </span>
							</div>
							<div class="col-md-10 features-info">
								<h4>Accusan timar</h4>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="clearfix"> </div></a>
						</div>						
					</div><!---end-features-grid---->
					<div class="col-md-4 features-grid tab-content">
						<div class="back" style="height: 505px;" style="background: url(images/iPhone-5S-White.png) no-repeat; background-size: 90%;">
							<div class="tab-pane active" id="t1"><img src="images/slide.jpg" title="features-demo" /></div>
						</div>
						<!--<div class="big-divice">
							<img src="images/iPhone-5S-White.png" title="features-demo" />
						</div>-->
						<!--<div class="tab-pane active" id="t1"><img src="images/iPhone-5S-White.png" style="width: 365px;" title="features-demo" /></div>
					    <div class="tab-pane" id="t2"><img src="images/slide.jpg" style="width: 365px;" title="features-demo" /></div>
					    <div class="tab-pane" id="t3"><img src="images/banner.png" style="width: 365px;" title="features-demo" /></div>
					    <div class="tab-pane" id="t4"><img src="images/divice-in-hand.png" style="width: 365px;" title="features-demo" /></div>
					    <div class="tab-pane" id="t5"><img src="images/slide.jpg" style="width: 365px;" title="features-demo" /></div>
					    <div class="tab-pane" id="t6"><img src="images/iPhone-5S-White.png" style="width: 365px;" title="features-demo" /></div>	-->
					</div>						
					<!---end-features-grid---->
					<div class="col-md-4 features-grid nav nav-tabs" id="otherInfoTab">
						<div class="features-grid-info"><a class="cl" href="#t4">
							<div class="col-md-2 features-icon1">
								<span class="f-icon3"> </span>
							</div>
							<div class="col-md-10 features-info">
								<h4>Accusan timar</h4>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="clearfix"> </div></a>
						</div>
						<div class="features-grid-info"><a class="cl" href="#t5">
							<div class="col-md-2 features-icon1">
								<span class="f-icon4"> </span>
							</div>
							<div class="col-md-10 features-info">
								<h4>Accusan timar</h4>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="clearfix"> </div></a>
						</div>
						<div class="features-grid-info"><a class="cl" href="#t6">
							<div class="col-md-2 features-icon1">
								<span class="f-icon5"> </span>
							</div>
							<div class="col-md-10 features-info">
								<h4>Accusan timar</h4>
								<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="clearfix"> </div></a>
						</div>
						
					</div><!---end-features-grid---->
					<div class="clearfix"> </div>
				</div>
			</div>
			<script>
			    $(function() {
			        $('#otherInfoTab a:first').tab('show');//初始化显示哪个tab
			 
			        $('#otherInfoTab a').click(function(e) {
			            e.preventDefault();//阻止a链接的跳转行为
			            $(this).tab('show');//显示当前选中的链接及关联的content
			        })
			    })
			</script>
			<script type="text/javascript">
	            $(".features-grid-info").click(function () {
	                clearClass();
	                $(this).addClass("bg_color");
	            });
	            function clearClass() {
	                $(".features-grid-info").each(function () {
	                    $(this).removeClass("bg_color");
	                });
	            }
	        </script>
				<!----//features-grids----->
	</body>
</html>
